<template>
	<view class="bg-white u-padding-20">
		<u-navbar title="报名" :autoBack="true" safeAreaInsetTop fixed placeholder  />

		<view class="login-form-content">
			<u--form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
				<u-form-item label-width="80" label="选择学生" prop="studentName">
					<view @click="onShowSelector" style="width: 80%; height: 40rpx; line-height: 150%;">
						<text v-if="model.studentName == ''">请选择</text>
						<view>{{model.studentName}}</view>
					</view>
				</u-form-item>

				<u-form-item label-width="80" label="选择课程" prop="courseName">
					<view @click="showSelecter2=true" style="width: 80%; height: 40rpx; line-height: 150%;">
						<text v-if="model.courseName == ''">请选择</text>
						<view>{{model.courseName}}</view>
					</view>
				</u-form-item>
				
				<view v-if="showMore">
					<u-form-item label-width="80" label="开始日期" prop="startDate">
						<view @click="selectStartDate=true" style="width: 80%; height: 40rpx; line-height: 150%;">
							<text v-if="model.startDate == ''">请选择</text>
							<view>{{model.startDate}}</view>
							<u-picker v-model="selectStartDate" mode="time" :params="pickerParams"
								@confirm="chooseStartDate">
							</u-picker>
						</view>
					</u-form-item>
					<u-form-item label-width="80" label="有效期至" prop="expireDate">
						<view @click="selectExpireDate=true" style="width: 80%; height: 40rpx; line-height: 150%;">
							<text v-if="model.expireDate == ''">请选择</text>
							{{model.expireDate}}
						</view>
						<u-picker v-model="selectExpireDate" mode="time" :params="pickerParams"
							@confirm="chooseExpiredDate">
						</u-picker>
					</u-form-item>
					<u-form-item label-width="80" label="课次数" prop="countLessonTotal">
						<u-input type="number" v-model="model.countLessonTotal"></u-input>
						<text slot="right">次</text>
					</u-form-item>
					<u-form-item label-width="80" label="课程金额" prop="courseAmount">
						<u--input type="number" v-model="model.courseAmount"></u--input>
						<text slot="right">元</text>
					</u-form-item>
					<u-form-item label-width="80" label="实收金额" prop="paidAmount">
						<u--input type="number" v-model="model.paidAmount"></u--input>
						<text slot="right">元</text>
					</u-form-item>
					<u-form-item label-width="80" label="优惠金额" prop="discount">
						<u--input type="number" v-model="model.discount"></u--input>
						<text slot="right">元</text>
					</u-form-item>

					<u-form-item label-width="80" label="备注" prop="remark">
						<u--input type="textarea" v-model="model.remark"></u--input>
					</u-form-item>

				</view>


			</u--form>

			<view class="action-btn" customStyle="margin-top: 10px;">
				<u-row justify="space-between" gutter="10">
					<u-col span="6">
						<u-button type="primary" text="提交" @click="submit"></u-button>
					</u-col>
					<u-col span="6">
						<u-button type="error" text="重置" @click="reset"></u-button>
					</u-col>
				</u-row>
			</view>
			
			<view class="fix-bottom-buttons-box"></view>

			<StudentSelecter :limit="1" :visible.sync="showSelecter" @onSubmit="chooseStudent"></StudentSelecter>
			<CourseSelecter :limit="1" :visible.sync="showSelecter2" @onSubmit="chooseCourse"></CourseSelecter>

		</view>
	</view>
</template>

<script>
	import StudentSelecter from "@/components/selecter/student-selecter.vue"
	import CourseSelecter from "@/components/selecter/course-selecter.vue"
	import request from '@/utils/request'
	export default {
		components: {
			StudentSelecter,
			CourseSelecter
		},
		data() {
			return {
				showSelecter: false,
				showSelecter2: false,
				selectStartDate: false,
				selectExpireDate: false,
				showMore: false,
				pickerParams: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				model: {
					studentId: '',
					studentName: '',
					courseName: '',
					startDate: '',
					expireDate: '',
					countLessonTotal: '',
					courseAmount: '',
					paidAmount: '',
					discount: 0,
					remark: '',
				},
				rules: {
					studentId: [{
						required: true,
						message: '请选择学员',
						trigger: 'change'
					}],
					studentName: [{
						required: true,
						message: '请选择学员',
						trigger: 'change'
					}],
					courseName: [{
						required: true,
						message: '请选择课程',
						trigger: 'change'
					}],
					startDate: [{
						required: true,
						message: '请选择开始日期',
						trigger: 'change'
					}],
					expireDate: [{
						required: true,
						message: '请选择有效期',
						trigger: 'change'
					}],
					countLessonTotal: [{
						required: true,
						type: 'number',
						message: '请输入课次数',
						trigger: ['change', 'blur']
					}],
					courseAmount: [{
						required: true,
						type: 'number',
						message: '请输入课程金额',
						trigger: ['change', 'blur']
					}],
					paidAmount: [{
						required: true,
						type: 'number',
						message: '请输入收款金额',
						trigger: ['change', 'blur']
					}],
				},

				errorType: ['message'],
			}
		},
		onLoad() {

		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			onShowSelector() {
				this.showSelecter = true
			},
			chooseStartDate(a) {
				this.model.startDate = a.year + '-' + a.month + '-' + a.day
			},
			chooseExpiredDate(a) {
				this.model.expireDate = a.year + '-' + a.month + '-' + a.day
			},
			chooseStudent(s) {
				if(!s.id) {
					showMsg('请选择学生')
					return;
				}
				this.model.studentId = s.id
				this.model.studentName = s.name
			},
			chooseCourse(s) {
				if(!s.id) {
					showMsg('请选择课程')
					return;
				}
				this.model.courseId = s.id
				this.model.courseName = s.name
				this.getCourseInfo(s.id)
			},
			getCourseInfo: async function(id) {

				if (id) {
					request({url:'/erp/course/info', data:{id}}).then(res => {
						if (!this.$common.handleResponseMsg(res)) return;
						const info = res

						this.model.startDate = this.$common.timeFormat(new Date(), 'yyyy-MM-dd')
						this.model.expireDate = this.$common.timeFormat(this.$common.dateAddMonth(new Date(),
							info.expireMonths), 'yyyy-MM-dd')
						this.model.countLessonTotal = info.lessonCount
						this.model.courseAmount = info.price
						this.model.paidAmount = info.price
						this.model.courseId = info.id

						this.showMore = true;
					});
				}
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						request({url:'/erp/course/saveCourse', data:this.model}).then(res => {
							if (!this.$common.handleResponseMsg(res)) return;
							this.$common.showAlert("提交成功", "已报单成功！", () => {
								uni.navigateTo({
									url: '/pages/contract/index',
								})
							})
						});
					} else {
						console.log('验证失败');
					}
				});
			},
			clickLeft() {
				uni.navigateBack()
			},
			clickRight() {
				uni.navigateTo({
					url: '/pages/contract/index',
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	u-padding-20 {
		margin:20px;
		padding: 20px;
	}
	
	.login-form-content {
	  text-align: center;
	  margin: 20px auto;
	  width: 95%;
	
	  .input-item {
	    margin: 20px auto;
	    background-color: #f5f6f7;
	    height: 45px;
	    border-radius: 20px;
	
	    .icon {
	      font-size: 38rpx;
	      margin-left: 10px;
	      color: #999;
	    }
	
	    .input {
	      width: 100%;
	      font-size: 14px;
	      line-height: 20px;
	      text-align: left;
	      padding-left: 15px;
	    }
	
	  }
	
	  .login-btn {
	    margin-top: 40px;
	    height: 45px;
	  }
	
	  .xieyi {
	    color: #333;
	    margin-top: 20px;
	  }
	}
</style>
